<template>
	<view class="i-picker" v-if="modelValue" :style="{zIndex}">
		<view class="body">
			<view class="title">
				<view>选择日期</view>
				<view class="image">
					<image src="../../static/images/close_gray_icon.png" class="confirm" @click.stop="close" />
				</view>
			</view>
			<view class="timers">
				<!-- 				<text style="margin-left: 32rpx;" @click="showTimer = true">{{formData.fromDate || '开始日期'}}</text>
				<text>至</text>
				<text style="margin-right: 32rpx;">{{formData.endDate || '结束日期'}} </text> -->
				<text @click="check(0)" :class="{acitve: acitve === 0}">{{startTime}}</text>
				<text>至</text>
				<text @click="check(1)" :class="{acitve: acitve === 1}">{{endTime}}</text>
			</view>
			<!-- 			<view class="select">
				<view @click="check(0)" :class="{acitve: acitve === 0}">{{startTime}}</view>
				<text>至</text>
				<view @click="check(1)" :class="{acitve: acitve === 1}">{{endTime}}</view>
			</view> -->
			<picker-view :style="{height}" :value="selectData" @change="bindChange" class="picker-view"
				indicator-style="height: 34px;">
				<picker-view-column v-for="(item,index) in list" :key="index">
					<view class="item" v-for="i in item" :key="i.value">{{i.label}}</view>
				</picker-view-column>
			</picker-view>
			<view class="buttons">
				<i-buttons color="#fff" bgColor="#FB652E" padding="18rpx 0" radius="4" size="32"
					@click="confirm">确定</i-buttons>
			</view>

			<view style="height: 80rpx;">

			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref,
		defineProps,
		defineEmits,
		watch
	} from 'vue';
	import { getCountDays, showTost, timeStr } from '../../utils/common';

	const props = defineProps({
		timeStrPick: {
			type: String,
			default: ''
		},
		zIndex: {
			type: String,
			default: 99
		},
		modelValue: {
			type: Boolean,
			default: false
		},
		height: {
			type: String,
			default: '400rpx'
		},
		tabBar: {
			type: Boolean,
			default: true
		},
		value: {
			type: Array,
			default: () => []
		} as any,
	})

	const emit = defineEmits(['update:modelValue', 'confirm'])
	const selectData = ref<any[]>([0, 0, 0])
	const list = ref<any[]>([[]])
	const acitve = ref(0)
	const startTime = ref('')
	const endTime = ref('')


	const bindChange = (e : {
		detail : {
			value : any[]
		}
	}) => {
		console.log(e, 'eeeee');
		const val = e.detail.value
		selectData.value.map((item, index) => {
			if (val[index] !== item) {
				switch (index) {
					case 0:
						// if (new Date().getFullYear() === list.value[0][val[index]].value) {
						// 	getTimePick(new Date().getMonth() + 1, 1, '月')
						// } else {
						// }
						getTimePick(12, 1, '月')
						getTimePick(getCountDays(list.value[1][val[1]].value, list.value[0][val[0]].value), 2, '日')
						break;
					case 1:
						getTimePick(getCountDays(list.value[1][val[1]].value, list.value[0][val[0]].value), 2, '日')
						break;
					default:
						break;
				}
			}
		})
		selectData.value = val
		if (acitve.value === 0) {
			startTime.value = `${list.value[0][val[0]].value}-${timeStr(list.value[1][val[1]].value)}-${timeStr(list.value[2][val[2]].value)}`
		} else {
			endTime.value = `${list.value[0][val[0]].value}-${timeStr(list.value[1][val[1]].value)}-${timeStr(list.value[2][val[2]].value)}`
		}
	}
	const close = () => {
		if (props.tabBar) {
			uni.showTabBar()
		}
		emit('update:modelValue', false)
	}

	const check = (i : number) => {
		if (acitve.value === i) {
			return
		}
		acitve.value = i
		if (i === 0) {
			getSelectData(startTime.value.split('-'))
		} else {
			getSelectData(endTime.value.split('-'))
		}
	}

	// 获取年月日
	const getFormatList = () => {
		const t = new Date()
		const year = t.getFullYear();
		const month = t.getMonth() + 1;
		const countDays = getCountDays(month + '')


		const timeList = [[], [], []]

		for (let i = 1; i < 50; i++) {
			timeList[0].push({
				label: year - i + 1 + '年',
				value: year - i + 1
			})
			if (12 >= i) {
				timeList[1].push({
					label: i + '月',
					value: i
				})
			}
			if (countDays >= i) {
				timeList[2].push({
					label: i + '日',
					value: i
				})
			}
			list.value = timeList
		}

		if (props.timeStrPick) {
			const strList = props.timeStrPick.split(' 至 ')
			startTime.value = strList[0]
			endTime.value = strList[1]
		} else {
			startTime.value = `${year}-${timeStr(month)}-${timeStr(t.getDate())}`
			endTime.value = `${year}-${timeStr(month)}-${timeStr(t.getDate())}`
		}

		getSelectData(startTime.value.split('-'))
	}

	const getTimePick = (num : number, index : number, type : string) => {
		list.value[index] = []
		for (var i = 1; i <= num; i++) {
			// Things[i]
			list.value[index].push({
				label: i + type,
				value: i
			})
		}
	}

	const getSelectData = (arr : any[]) => {
		let values = []
		arr.map((item, index : number) => {
			values[index] = list.value[index].findIndex((i : { label : string }) => i.label.includes(Number(item).toString()))
		})
		values = values.map(item => {
			return item === -1 ? 0 : item
		})
		bindChange({ detail: { value: values } })
	}


	const confirm = () => {
		if (new Date(startTime.value + ' 00:00:00').getTime() > new Date().getTime()) {
			showTost('开始时间时间不能大于当前时间')
			return
		}

		if (new Date(startTime.value).getTime() > new Date(endTime.value).getTime()) {
			showTost('开始时间不能大于结束时间')
			return
		}
		emit('confirm', {
			startTime: startTime.value,
			endTime: endTime.value,
		})
		close()
	}

	getFormatList()


	watch(() => props, (val) => {
		if (val.tabBar) {
			val.modelValue ? uni.hideTabBar() : uni.showTabBar()
		}
	}, {
		immediate: true,
		deep: true
	})
</script>

<style lang="scss" scoped>
	.i-picker {
		width: 100vw;
		height: 100vh;
		position: fixed;
		overflow: hidden;

		top: 0;
		background: rgba(0, 0, 0, 0.2);
		@include flexCC;
		justify-content: flex-end;

		.body {
			width: 100vw;
			background-color: #fff;

			.buttons {
				padding: 0 32rpx;
			}

			.title {
				padding: 24rpx 32rpx;
				@include flexRS;
				padding-bottom: 20rpx;
				// border-bottom: 1rpx solid #f3f4f5;
				@include titlefont(32rpx);

				.image {
					width: 48rpx;
					height: 48rpx;

					image {
						width: 48rpx;
						height: 48rpx;
					}
				}
			}

			.select {
				padding: 24rpx 32rpx;
				@include flexRS;

				view {
					width: 280rpx;
					padding: 18rpx 0;
					background-color: $backColor;
					@include flexRC;
					@include dfont;
					border: 1rpx solid rgba(0, 0, 0, 0);
				}



				text {
					@include dfont;
					color: #a0a0a0;
				}
			}

			.picker-view {
				margin-bottom: 24rpx;

			}

			.item {
				@include dfont;
				text-align: center;
				white-space: nowrap;
				line-height: 34px
			}
		}

		.timers {
			@include flexRS;
			width: calc(100% - 64rpx);
			margin: 0 auto;
			justify-content: space-around;
			margin-top: 48rpx;
			height: 80rpx;
			background: $background-color;
			border-radius: 24rpx;
			margin-bottom: 240rpx;

			text {
				@include dfont;
				color: #A0A0AD;
			}
		}

	}

	.acitve {
		// border: 1rpx solid $dcolor;
		color: #FB652E !important;
	}
</style>